<template>
    <div>
        <el-row>
            <el-col :span="8" align="left">
                <span>产品：</span>
                <el-select v-model="productIds" filterable multiple placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.productId"
                    :label="item.productName"
                    :value="item.productId">
                    </el-option>
                </el-select>
            </el-col>   
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="4" align="left">
                <el-button type="success" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出数据</el-button>
            </el-col>
            <el-col :span="16"></el-col>
        </el-row> 
        <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              height="500"
              style="width: 950px">
            <el-table-column
                label="产品名称"
                prop="productName"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="合同总数"
                prop="totalCount"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column 
                label="已分配总数" 
                prop="totalAssignedCount"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="已使用总数"
                prop="totalReceiptSellBackCount"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="作废数"
                prop="delateCount"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="未分配数"
                prop="noAssignedCount"
                align="center"
                width="200">
            </el-table-column>  
            <el-table-column
                label="未使用数"
                prop="noUseCount"
                align="center"
                width="120">
            </el-table-column>  
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
    </div>
</template>

<script>
var searchInfo={
    productIds:[]
};
export default {
    data(){
        return{
            exportLoading:false,
            productIds:[],
            options:[],
            tableLoading:false,
            table:[],
            AssignedInfoList:[],
            currentPage: 1,
            pageSize: 1000,
            totalCount: 0,
        }
    },
    mounted(){
        // this.initData();
        this.searchProduct();
    },
    methods:{
        requestInfo(){
            this.tableLoading=true;
            this.getRequest("/api/report/contractno/query?productIds="+this.productIds)
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj;
                    this.totalCount = resp.data.obj.length;
                    searchInfo={
                        productIds:this.productIds,
                    }
                }
            });
        },
        searchProduct(){
            this.getRequest("/common/get_all_product_info").then(resp=>{
                if (resp && resp.data.status == 200){
                    this.options=resp.data.obj
                }
            })
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        exports(){
            this.exportLoading=true;
            console.log(searchInfo)
            var address=`/api/report/contractno/export?productIds=${searchInfo.productIds}`
            this.common.downloadFile(address);
            setTimeout(()=>{
                this.exportLoading=false;
            },2000) 
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.el-table{
    margin: 0 auto;
}
</style>
